<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/TextPlugin.min.js"></script>
    <style>
        body {
        display: flex;
        align-items: center;
        justify-content: stretch;
        min-height: 100vh;
        }

        .wrapper {
        margin: 1rem;
        }

        h1 span {
        color: var(--color-shockingly-green)
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h1>GreenSock's TextPlugin<span style="color: orange;"></span></h1>
        <h2>Set or animate text in sequence. Reversible too!</h2>
        
        
      </div>

    <!-- <button id="animate">animate</button> -->
    <script>
        // use a script tag or an external JS file
        document.addEventListener("DOMContentLoaded", (event) => {
            gsap.registerPlugin(ScrollTrigger,TextPlugin)
            gsap.defaults({ease: "none"});

            const tl = gsap.timeline({repeat:3, repeatDelay:1, yoyo:true});
            tl.to("h1 span", {duration: 4, text:" is so easy you should try it some time!"})
        });
       
       </script>
</body>
</html>